<template>
  <div class="pad-20 bgc-default">
    <div class="coupon-show mar-b-20">
      <div class="coupon-type type-1">
        <h2>代金券</h2>
        <p>
          <span>例：10元全场通用代金券</span>
          <span>不限制消费金额使用</span>
        </p>
        <div class="border-top"></div>
        <el-button @click="addCoupon('10')" type="primary">添加代金券</el-button>
      </div>
      <div class="coupon-type type-2">
        <h2>满减券</h2>
        <p>
          <span>例：满100减10元</span>
          <span>满足条件优惠相应金额</span>
        </p>
        <div class="border-top"></div>
        <el-button @click="addCoupon('20')" type="primary">添加满减券</el-button>
      </div>
      <div class="coupon-type type-3">
        <h2>折扣券</h2>
        <p>
          <span>例：满100打9折</span>
          <span>满足条件给予相应折扣</span>
        </p>
        <div class="border-top"></div>
        <el-button @click="addCoupon('30')" type="primary">添加折扣券</el-button>
      </div>
    </div>
    <div class="pad-l-20 pad-r-20 bg-color-white">
      <div class="tab-style-default">
        <el-tabs v-model="coupon.couponStatus" @tab-click="statusClick">
          <el-tab-pane :label="labels[0]" name="0"> </el-tab-pane>
          <el-tab-pane :label="labels[1]" name="1"> </el-tab-pane>
          <el-tab-pane :label="labels[2]" name="2"> </el-tab-pane>
          <el-tab-pane :label="labels[100]" name="100"></el-tab-pane>
        </el-tabs>
      </div>
      <!--顶部搜索 -->
      <div class="top-operate">
        <div>
          <div>
            <el-input style="width: 200px;" v-model="coupon.textValue" placeholder="优惠券名称"></el-input>
            <el-select class="select-class mar-l-10" v-model="coupon.couponType" placeholder="优惠券类型">
              <el-option label="所有" value=" "></el-option>
              <el-option v-for="(val, key) in dict.couponType" :key="key" :label="val" :value="key"/>
            </el-select>
            <el-select v-if="coupon.couponStatus == 100" class="select-class mar-l-10" v-model="couponStatus" placeholder="优惠券状态">
              <el-option label="所有" value=" "></el-option>
              <el-option v-for="(val, key) in dict.couponStatus" :key="key" :label="val" :value="key"/>
            </el-select>
            <el-select class="select-class mar-l-10" v-model="coupon.timeCol" v-if="coupon.couponStatus > 0">
              <el-option label="创建时间" value="createTime"></el-option>
              <el-option label="发布时间" value="publishTime" v-if="coupon.couponStatus > 0"></el-option>
              <el-option label="结束时间" value="completeTime" v-if="coupon.couponStatus > 1"></el-option>
            </el-select>
            <el-date-picker
              class="mar-l-10"
              v-if="coupon.couponStatus > 0"
              v-model="coupon.timeValue"
              type="daterange"
              range-separator="至"
              value-format="yyyy-MM-dd HH:mm:ss"
              :default-time="['00:00:00', '23:59:59']"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
            <el-button type="primary" @click="handleSearch" style="margin-left: 15px;">查询</el-button>
            <el-button plain="" @click="resetSearch" style="margin-left: 10px;">重置</el-button>
          </div>
        </div>
      </div>
      <!-- 内容列表 -->
      <div class="table-container">
        <el-table ref="multipleTable" :data="couponList" v-loading="listLoading"
          element-loading-text="加载中"
          style="width: 100%"
          header-cell-class-name="default-header"
          row-class-name="default-row"
        >
          <el-table-column width="240px" label="优惠券名称" prop="couponName" fixed="left"></el-table-column>
          <el-table-column width="200px" label="优惠券类型" prop="couponType" fixed="left">
            <template slot-scope="scope">
              <div v-if="scope.row.couponType">
                <div>{{dict.couponType[scope.row.couponType]}}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column width="240px" label="优惠内容">
            <template slot-scope="scope">
              <div>{{ scope.row.couponRemark }}</div>
            </template>
          </el-table-column>
          <el-table-column width="200px" label="已领取/剩余">
            <template slot-scope="scope">
              <div>{{scope.row.receiveNum||'0'}}/{{scope.row.availableNum||'不限数量'}}</div>
            </template>
          </el-table-column>
          <el-table-column width="150px" label="已使用">
            <template slot-scope="scope">
              <div>{{scope.row.usedNum||'0'}}</div>
            </template>
          </el-table-column>
          <el-table-column width="220px" label="有效时间">
            <template slot-scope="scope">
              <div v-if="scope.row.validTimeType == 1">
                <div>开始：{{scope.row.validStartTime||''}}</div>
                <div>结束：{{scope.row.validEndTime||''}}</div>
              </div>
              <div v-if="scope.row.validTimeType == 2">领券当日起{{scope.row.validFromToday||''}}天内有效</div>
              <div v-if="scope.row.validTimeType == 3">领券次日起{{scope.row.validFromTomorrow||''}}天内有效</div>
            </template>
          </el-table-column>
          <el-table-column width="220px" :label="(coupon.couponStatus == 1 ? '发布' : (coupon.couponStatus == 2 ? '结束' : '创建')) + '时间'">
            <template slot-scope="scope">
              {{coupon.couponStatus == 1 ? scope.row.publishTime : (coupon.couponStatus == 2 ? scope.row.completeTime : scope.row.createTime)}}
            </template>
          </el-table-column>
          <el-table-column label="结束原因" width="200px" v-if="coupon.couponStatus == 2" prop="endReason"></el-table-column>
          <el-table-column align="right" label="操作" min-width="140px" fixed="right">
            <template slot-scope="scope">
              <div>
                <el-button type="text" size="medium" @click="editCoupon(scope.row)" v-if="scope.row.couponStatus == 0">编辑</el-button>
                <el-button type="text" size="medium" @click="viewCoupon(scope.row)" v-if="scope.row.couponStatus == 2 || scope.row.couponStatus == 1">查看</el-button>
                <el-button type="text" size="medium" @click="viewCouponData(scope.row)" v-if="scope.row.couponStatus == 1 || scope.row.couponStatus == 2">数据</el-button>
                <el-button type="text" size="medium" @click="publishCoupon(scope.row)" v-if="scope.row.couponStatus == 0">发布</el-button>
                <el-button type="text" size="medium" @click="showEndCoupon(scope.row)" v-if="scope.row.couponStatus == 1">结束</el-button>
                <el-button type="text" size="medium" @click="deleteCoupon(scope.row)" v-if="scope.row.couponStatus == 0">删除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 列表分页 -->
      <div class="pagination">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="searchListQuery.currentPage"
          :page-sizes="[10, 20, 50, 100]" :page-size="searchListQuery.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>
    <el-dialog title="优惠券结束后，顾客已领取优惠券不能使用，请谨慎操作。" :visible.sync="endCouponVisible" :close-on-press-escape="true" width="600px">
      <el-form label-width="100px">
        <el-form-item label="结束原因" class="pad-10">
          <el-input
            type="textarea"
            :rows="6"
            placeholder="请输入内容"
            v-model="editCouponInfo.endReason">
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="endCoupon">确认结束</el-button>
        <el-button @click="endCouponVisible = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<style lang="less" scoped>
  .coupon-show{
    &:after{
      content: '';
      display: block;
      clear: both;
    }    
    .coupon-type{
      float: left;
      text-align: center;
      border-radius: 8px;
      width: 300px;
      height: 150px;
      background: radial-gradient(circle at 0px 96px, transparent 20px, #ffffff 0) top left / 50% no-repeat,
                  radial-gradient(circle at 150px 96px, transparent 20px, #ffffff 0) bottom right / 50% no-repeat;
      filter: drop-shadow(0px 2px 14px rgba(154,154,154,0.18));
      overflow: hidden;
      // /deep/ .el-button{
      //   padding: 10px 23px;
      // }
      h2{
        margin: 12px 0 8px 0;
        padding: 0;
        font-size: 20px;
        font-weight: normal;
        letter-spacing: 4px;
        font-family: "微软雅黑", "Arial", "sans-serif";
      }
      p{
        margin: 0;
        padding: 0;
        font-size: 14px;
        line-height: 1.3;
        color: #666;
        span{
          display: block;
          position: relative;
          width: 100%;
          text-align: center;
        }
      }
      .el-button{
        height: 32px;
        padding: 0 23px;
        line-height: 32px;
      }
      .border-top{
        border-top: #e5e5e5 1px dashed;
        margin: 12px 20px 12px 20px;
      }
      &.type-1{
        margin-right: 20px;
        h2{
          color: #409EFF;
        }
        &:before{
          display: block;
          content: '';
          height: 6px;
          background: #bdddff;
        }
      }
      &.type-2{
        margin-right: 20px;
        h2{
          color: #FC5A5A;
        }
        &:before{
          display: block;
          content: '';
          height: 6px;
          background: #ffd3d3;
        }
        /deep/ .el-button--primary{
          background: #fc5a5a;
          border-color: #fc5a5a;
        }
        /deep/ .el-button--primary:hover, /deep/ .el-button--primary:focus{
          background: #fd7b7b;
          border-color: #fd7b7b;
        }
      }
      &.type-3{
        h2{
          color: #F7D07F;
        }
        &:before{
          display: block;
          content: '';
          height: 6px;
          background: #ffeeca;
        }
        /deep/ .el-button--primary{
          background: #efbc51;
          border-color: #efbc51;
        }
        /deep/ .el-button--primary:hover, /deep/ .el-button--primary:focus{
          background: #f2c974;
          border-color: #f2c974;
        }
      }
    }
    @media screen and (max-width: 1280px) {
      .coupon-type{
        width: 280px!important;
        background: radial-gradient(circle at 0px 96px, transparent 20px, #ffffff 0) top left / 50% no-repeat,
                  radial-gradient(circle at 140px 96px, transparent 20px, #ffffff 0) bottom right / 50% no-repeat;
        filter: drop-shadow(0px 2px 14px rgba(154,154,154,0.18));
      }
    }
    @media screen and (max-width: 1200px) {
      .coupon-type{
        width: 250px!important;
        background: radial-gradient(circle at 0px 96px, transparent 20px, #ffffff 0) top left / 50% no-repeat,
                  radial-gradient(circle at 125px 96px, transparent 20px, #ffffff 0) bottom right / 50% no-repeat;
        filter: drop-shadow(0px 2px 14px rgba(154,154,154,0.18));
      }
    }
    @media screen and (max-width: 1145px) {
      .coupon-type{
        width: 220px!important;
        background: radial-gradient(circle at 0px 96px, transparent 20px, #ffffff 0) top left / 50% no-repeat,
                  radial-gradient(circle at 110px 96px, transparent 20px, #ffffff 0) bottom right / 50% no-repeat;
        filter: drop-shadow(0px 2px 14px rgba(154,154,154,0.18));
      }
    }
    @media screen and (max-width: 1055px) {
      .coupon-type{
        width: 200px!important;
        background: radial-gradient(circle at 0px 96px, transparent 20px, #ffffff 0) top left / 50% no-repeat,
                  radial-gradient(circle at 95px 96px, transparent 20px, #ffffff 0) bottom right / 50% no-repeat;
        filter: drop-shadow(0px 2px 14px rgba(154,154,154,0.18));
      }
    }
  }
  .select-class {
    margin-right: -5px;
    width: 139px;
  }
</style>

<script>
  import { pageCoupon, statCoupon, deleteCoupon, publishCoupon, endCoupon } from '@/api/coupon/coupon'

  export default {
    data() {
      return {
        total: 0,
        listLoading: true,
        searchListQuery: {},
        defaultQuery: {
          enterpriseId: this.getEnterpriseId(),
          couponName: '',
          couponType: '',
          couponStatus: '0',
          currentPage: 1,
          size: 10
        },
        coupon: {
          couponStatus: '0',
          textCol: 'couponName',
          textValue: '',
          timeCol: 'createTime',
          timeValue: []
        },
        endCouponVisible: false,
        editCouponInfo: {},
        dict: {
          couponStatus: {},
          couponType: {}
        },
        couponList: [],
        labels: {
          '0': '待发布(0)',
          '1': '已发布(0)',
          '2': '已结束(0)',
          '100': '全部(0)'
        },
        couponStatus: ''
      }
    },
    // 初始化页面
    created() {
      this.searchListQuery = { ...this.defaultQuery }
      const couponStatus = this.getCurrentPage().query.couponStatus
      if (couponStatus) {
        this.coupon.couponStatus = couponStatus
      }
      this.init()
    },
    filters: {
      dateFilter(e) {
        return e
      }
    },
    mounted() {
    },
    methods: {
      // 更改当前页数
      handleCurrentChange(val) {
        this.searchListQuery.currentPage = val
        this.init()
      },
      // 更改当前页面大小
      handleSizeChange(val) {
        this.searchListQuery.size = val
        this.init()
      },
      setSearchListQuery() {
        // 搜索状态
        const currentPage = this.searchListQuery.currentPage
        const size = this.searchListQuery.size
        this.searchListQuery = { ... this.defaultQuery }
        this.searchListQuery.enterpriseId = this.getEnterpriseId()
        this.searchListQuery.currentPage = currentPage
        this.searchListQuery.page = currentPage
        this.searchListQuery.size = size
        switch (this.coupon.couponStatus * 1) {
          default:
            this.searchListQuery.couponStatus = this.coupon.couponStatus
            break
          case 100:
            this.searchListQuery.couponStatus = ''
            if (this.couponStatus) {
              this.searchListQuery.couponStatus = this.couponStatus
            }
            break
        }
        this.searchListQuery[this.coupon.textCol] = this.coupon.textValue
        this.searchListQuery.couponType = this.coupon.couponType
        this.searchListQuery.dateColumn = this.coupon.timeCol
        if (this.coupon.timeValue && this.coupon.timeValue.length > 0) {
          this.searchListQuery.startDate = this.coupon.timeValue[0]
          this.searchListQuery.endDate = this.coupon.timeValue[1] || ''
        } else {
          this.searchListQuery.startDate = ''
          this.searchListQuery.endDate = ''
        }
      },
      init() {
        this.setSearchListQuery()
        statCoupon({ enterpriseId: this.getEnterpriseId() }).then(response => {
          if (response.isError) return
          this.labels[0] = '待发布(' + response.data[0] + ')'
          this.labels[1] = '已发布(' + response.data[1] + ')'
          this.labels[2] = '已结束(' + response.data[2] + ')'
          this.labels[100] = '全部(' + response.data[100] + ')'
        })
        pageCoupon(this.searchListQuery).then(response => {
          if (response.isError) return
          this.total = response.data.total
          this.couponList = response.data.records
          Object.assign(this.dict, response.data.dict)
          this.listLoading = false
        })
      },
      statusClick() {
        this.searchListQuery.currentPage = 1
        this.init()
      },
      showDetail(row) {
      },
      handleSearch() {
        this.searchListQuery.currentPage = 1
        this.init()
      },
      resetSearch() {
        this.searchListQuery = { ... this.defaultQuery }
        this.coupon = {
          textCol: 'couponName',
          textValue: '',
          timeCol: 'createTime',
          timeValue: [],
          orderType: '',
          couponType: '',
          couponStatus: this.coupon.couponStatus
        }
        this.couponStatus = ''
        this.init()
      },
      addCoupon(couponType) {
        this.$router.push({ path: '/sell-promotion/coupon/detail', query: { couponType: couponType, editFlag: '1' }})
      },
      editCoupon(coupon) {
        this.$router.push({ path: '/sell-promotion/coupon/detail', query: { couponId: coupon.couponId, couponType: coupon.couponType, editFlag: '1' }})
      },
      viewCoupon(coupon) {
        this.$router.push({ path: '/sell-promotion/coupon/detail', query: { couponId: coupon.couponId, couponType: coupon.couponType, editFlag: '0' }})
      },
      viewCouponData(coupon) {
        this.$router.push({ path: '/sell-promotion/coupon/data', query: { couponId: coupon.couponId, couponType: coupon.couponType }})
      },
      publishCoupon(coupon) {
        publishCoupon(coupon.couponId).then(response => {
          if (response.isError) return
          this.$message({
            message: '发布成功！',
            type: 'success'
          })
          this.init()
        })
      },
      showEndCoupon(row) {
        this.editCouponInfo = row
        this.endCouponVisible = true
      },
      endCoupon() {
        if (!this.editCouponInfo.endReason) {
          this.$message.error('结束原因不能为空！')
          return
        }
        endCoupon(this.editCouponInfo).then(response => {
          if (response.isError) return
          this.$message({
            message: '成功！',
            type: 'success'
          })
          this.init()
          this.endCouponVisible = false
        })
      },
      deleteCoupon(coupon) {
        deleteCoupon(coupon.couponId).then(response => {
          if (response.isError) return
          this.$message({
            message: '删除成功！',
            type: 'success'
          })
          this.init()
        })
      }
    }
  }

</script>
